<template>
  <view class="a-navbar">
    <wd-grid >
      <wd-grid-item :custom-class="item.hidden?'extra':''" v-for="(item,index) in menus" :key="index" icon="goods" :use-slot="true">
        <view @click="toSwich(item.page)" v-show="!item.hidden">
          <view>
            <wd-img
              width="24"
              height="24"
              :src="item.index == props.index?item.select_icon:item.icon"
            ></wd-img>
          </view>
          <view class="section-name" style="font-size: 0.8rem;" :class="{'active': item.index == props.index}">
            {{ item.name }}
          </view>
        </view>
        <view v-show="item.hidden">
          
        </view>
      </wd-grid-item>
    </wd-grid>
  </view>
  
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { toSwich } from '@/hooks/utils'
import { onShow } from '@dcloudio/uni-app'
onShow(()=>{
	// #ifdef APP-PLUS
	uni.hideTabBar({ animation: false });
	// #endif
})

const props=defineProps(['index'])
const menus = ref([
  {
    page: '/pages/index/index',
    name: '首页',
    index: 1,
    icon: '/static/assets/images/icon_1.png',
    select_icon: '/static/assets/images/icon_1_sel.png'
  },
  {
    page: '/pages/classify/index',
    name: '分类',
    index: 2,
    icon: '/static/assets/images/icon_2.png',
    select_icon: '/static/assets/images/icon_2_sel.png'
  },
  {
    page: '/pages/world/index',
    name: '主题',
    index: 3,
    icon: '/static/assets/images/icon_3.png',
    select_icon: '/static/assets/images/icon_3_sel.png'
  },
  {
    page: '/pages/my/index',
    name: '我的',
    index: 4,
    icon: '/static/assets/images/icon_4.png',
    select_icon: '/static/assets/images/icon_4_sel.png'
  }
])
</script>
<style scoped lang="scss">
@import './a-nav.scss'
</style>